<template>
  <div class="detail-page">
    <div class="title xxl bold mb20">{{ detail.title }}</div>
    <div class="flex middle between mb20">
      <div class="flex middle overhide">
        <van-icon name="clock-o" />
        <div class=" m row1 ml5 col-77">{{ detail.createTime }}</div>
      </div>
      <div class="flex middle">
        <van-icon name="award-o" />
        <div class=" m row1 ml5 col-77">{{ detail.tags }}</div>
      </div>
    </div>

    <video
      class="video-container"
      :src="detail.videoUrl"
      :poster="detail.headUrl"
      :direction="90"
      initial-time="0"
      :controls="true"
      :autoplay="false"
      :loop="false"
      :muted="false"
    /></div
></template>

<script>
import { getKnowledge } from "./api";
import Taro from "@tarojs/taro";
import { Divider, Icon, Button } from "vant";

export default {
  components: {
    [Button.name]: Button,
    [Divider.name]: Divider,
    [Divider.name]: Divider,
    [Icon.name]: Icon
  },
  data() {
    return {
      detail: "",
      type: "",
      question: {},
      form: {
        answer: ""
      },
      dp: {},
      answered: true,
      startTime: null,
      articleId: ""
    };
  },
  computed: {},
  onLoad(options) {
    this.articleId = options.id;
    this.type = options.type;
    this.getDetail(options);
  },
  onShow(data) {
    if (data.id) {
      this.getDetail(data);
    }
  },
  onUnload() {},
  methods: {
    async getDetail({ id, type }) {
      const data = await getKnowledge(id);
      this.detail = data;
      Taro.setNavigationBarTitle({
        title: data.title
      });
    }
  }
};
</script>

<style lang="less">
.detail-page {
  padding: 20px;
}
.rich-text {
  line-height: 1.8;
}
.video-container {
  width: 100%;
  height: 380px;
}
</style>
